import { Component, OnInit, ViewChild, ElementRef, Inject } from '@angular/core';

import { MonitorService } from 'src/app/core/service/monitor.service';
import { MonitorStatisticsVo, ChartVo } from 'src/app/shared/models';
import { DOCUMENT } from '@angular/common';
// 堆叠区域图 —— 左顶上
const DEMO_AREA_OPTION = {
  title: {
    text: '堆叠区域图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接访问',
      type: 'line',
      stack: '总量',
      areaStyle: { normal: {} },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: '总量',
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      areaStyle: { normal: {} },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
// 项目安全趋势图 —— 右顶上
const DEMO_SAFE_OPTION = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
    type: 'value'
},
series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true
}]
}
const labelOption = {
  normal: {
    show: true,
    position: 'insideBottom',
    distance: 15,
    align: 'left',
    verticalAlign: 'middle',
    rotate: 90,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {
        textBorderColor: '#fff'
      }
    }
  }
};

const DEMO_BAR_OPTION = {
  color: ['#003366', '#006699', '#4cabce', '#e5323e'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['项目总数', '第三方库*100', '许可数', 'CVE总数']
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['2019年3月', '2019年4月', '2019年5月']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '项目总数',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      data: [320, 332, 301]
    },
    {
      name: '第三方库*100',
      type: 'bar',
      label: labelOption,
      data: [220, 182, 191]
    },
    {
      name: '许可数',
      type: 'bar',
      label: labelOption,
      data: [150, 232, 201]
    },
    {
      name: 'CVE总数',
      type: 'bar',
      label: labelOption,
      data: [98, 77, 101]
    }
  ]
};

// const DEMO_LINE_OPTION = {
//   title: {
//     text: '高危项目趋势图',
//     textStyle: {
//       fontSize: 16
//     },
//     left: 5
//   },
//   tooltip: {
//     trigger: 'axis'
//   },
//   legend: {
//     data: ['总项目数', '高危项目数'],
//     right: 10
//   },
//   xAxis: {
//     type: 'category',
//     boundaryGap: false,
//     data: []
//   },
//   yAxis: {
//     type: 'value',
//     axisLabel: {
//       formatter: '{value}'
//     }
//   },
//   series: [
//     {
//       name: '总项目数',
//       color: 'black',
//       type: 'line',
//       data: [],
//       markPoint: {
//         data: [
//           { type: 'max', name: '最大值' },
//           { type: 'min', name: '最小值' }
//         ]
//       },

//     },
//     {
//       name: '高危项目数',
//       type: 'line',
//       data: [],
//       markPoint: {
//         data: [
//           { type: 'max', name: '最大值' },
//           { type: 'min', name: '最小值' }
//         ]
//       }
//     }
//   ]
// };

const DEMO_PIE_OPTION = {
  legend: {},
  tooltip: {
    trigger: 'axis',
    showContent: false
  },
  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
      ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: { gridIndex: 0 },
  grid: { top: '55%' },
  series: [
    { type: 'line', smooth: true, seriesLayoutBy: 'row' },
    { type: 'line', smooth: true, seriesLayoutBy: 'row' },
    { type: 'line', smooth: true, seriesLayoutBy: 'row' },
    { type: 'line', smooth: true, seriesLayoutBy: 'row' },
    {
      type: 'pie',
      id: 'pie',
      radius: '30%',
      center: ['50%', '25%'],
      label: {
        formatter: '{b}: {@2012} ({d}%)'
      },
      encode: {
        itemName: 'product',
        value: '2012',
        tooltip: '2012'
      }
    }
  ]
};
@Component({
  selector: 'app-monitor',
  templateUrl: './monitor.component.html',
  styleUrls: ['./monitor.component.scss']
})
export class MonitorComponent implements OnInit {
  monitorStatistics = [
    { name: '总项目数', value: 0, key: 'appNum' },
    { name: '存在威胁的项目数', value: 0, key: 'appWithVulNum' },
    { name: '第三方库数', value: 0, key: 'libNum' },
    { name: '容器数', value: 0, key: 'containerNum' },
    { name: '存在威胁的容器数', value: 0, key: 'conWithVulNum' },
    { name: '安全弱点数', value: 0, key: 'vulnerabilitieNum' }
  ];
  //  ================ old ===============
  // barOption = {
  //   legend: {},
  //   tooltip: {},
  //   dataset: {
  //     source: [
  //       ['product', '2015', '2016', '2017'],
  //       ['Matcha Latte', 43.3, 85.8, 93.7],
  //       ['Milk Tea', 83.1, 73.4, 55.1],
  //       ['Cheese Cocoa', 86.4, 65.2, 82.5],
  //       ['Walnut Brownie', 72.4, 53.9, 39.1]
  //     ]
  //   },
  //   xAxis: { type: 'category' },
  //   yAxis: {},
  //   series: [
  //     { type: 'bar' },
  //     { type: 'bar' },
  //     { type: 'bar' }
  //   ]
  // };
  //  ================ new echarts 区域 ===============
  barOption = DEMO_AREA_OPTION;
  lineOption = DEMO_SAFE_OPTION;

  pieOption = {
    series: [
      {
        name: '资产信息',
        type: 'pie',
        radius: '55%',
        data: [
          { value: 235, name: 'mysql' },
          { value: 274, name: 'Tomcat' },
          { value: 310, name: 'linux' },
          { value: 335, name: 'JDBC' },
          { value: 400, name: 'MAC' }
        ]
      }
    ]
  };


  chartOption = {
    title: {
      text: '堆叠区域图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['mysql', 'Tomcat', 'linux', 'JDBC', 'MAC']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'mysql',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Tomcat',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'linux',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'JDBC',
        type: 'line',
        stack: '总量',
        areaStyle: { normal: {} },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'MAC',
        type: 'line',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        },
        areaStyle: { normal: {} },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };

  gaugeOption = DEMO_BAR_OPTION;

  pieLineOption = DEMO_PIE_OPTION;

  @ViewChild('treeMapDiv')
  treeMapDiv: ElementRef;

  constructor(
    private monitorService: MonitorService,
    @Inject(DOCUMENT) private document: any) {
    // this.monitorService.getMonitorStatictics().subscribe(
    //   (data: MonitorStatisticsVo) => {
    //     this.monitorStatistics.forEach((staticsItem) => {
    //       staticsItem.value = data[staticsItem.key];
    //     });
    //   }
    // );

    // this.monitorService.getMonitorHighTrend().subscribe(
    //   (data: ChartVo) => {
    //     this.lineOption.xAxis.data = data.showLabel;
    //     this.lineOption.series[0].data = data.showData[0].seriesValue;
    //     this.lineOption.series[1].data = data.showData[1].seriesValue;
    //     this.lineOption = Object.assign({}, this.lineOption);
    //   }
    // );
  }

  ngOnInit() { }

  switchFullScreen(isFullScreen) {
    const document = this.treeMapDiv.nativeElement;
    if (isFullScreen) {
      if (document.requestFullscreen) {
        document.requestFullscreen();
      } else if (document.mozRequestFullScreen) {
        document.mozRequestFullScreen();
      } else if (document.webkitRequestFullscreen) {
        document.webkitRequestFullscreen();
      } else if (document.msRequestFullscreen) {
        document.msRequestFullscreen();
      }
    } else {
      if (this.document.exitFullscreen) {
        this.document.exitFullscreen();
      } else if (this.document.mozCancelFullScreen) {
        this.document.mozCancelFullScreen();
      } else if (this.document.webkitCancelFullScreen) {
        this.document.webkitCancelFullScreen();
      } else if (this.document.msExitFullscreen) {
        this.document.msExitFullscreen();
      }
    }
  }
}
